<template>
  <el-card class="box-card">
    <div class="icon-container">
      <el-icon color="rgba(255, 255, 255, 0.7)">
        <Refresh @click="flip" />
      </el-icon>
    </div>
    <div id="clock-chart" class="chart" />
    <div class="date">{{date}}</div>
  </el-card>
</template>

<script>
import {
  Refresh
} from '@element-plus/icons-vue'
import * as echarts from 'echarts/core'
import { GaugeChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import moment from 'moment'

echarts.use([GaugeChart, CanvasRenderer])

export default {
  name: "Clock",
  components: {
    Refresh
  },
  data() {
    return {
      date: '',
      weeks: {
        'Monday': '星期一',
        'Tuesday': '星期二',
        'Wednesday': '星期三',
        'Thursday': '星期四',
        'Friday': '星期五',
        'Saturday': '星期六',
        'Sunday': '星期日'
      }
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    flip() {
      this.$emit('flip')
    },
    initChart() {
      const chart = echarts.init(document.getElementById('clock-chart'))
      const option = this.getOption()
      chart.setOption(option)
      setInterval(() => {
        const date = new Date()
        const second = date.getSeconds()
        const minute = date.getMinutes() + second / 60
        const hour = (date.getHours() % 12) + minute / 60
        option.animationDurationUpdate = 300
        chart.setOption({
          series: [
            {
              name: 'hour',
              animation: hour !== 0,
              data: [{ value: hour }]
            },
            {
              name: 'minute',
              animation: minute !== 0,
              data: [{ value: minute }]
            },
            {
              animation: second !== 0,
              name: 'second',
              data: [{ value: second }]
            }
          ]
        })
        const now = new moment()
        this.date = now.format('YYYY年MM月DD日 ') + this.weeks[now.format('dddd')]
      }, 1000)
    },
    getOption() {
      const option = {
        series: [
          {
            name: 'hour',
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 12,
            splitNumber: 12,
            clockwise: true,
            axisLine: {
              lineStyle: {
                width: 6,
                color: [[1, 'rgba(255,255,255,0.6)']],
                shadowColor: 'rgba(255, 255, 255, 0.4)',
                shadowBlur: 5
              }
            },
            splitLine: {
              length: 5,
              distance: 0,
              lineStyle: {
                color: 'rgba(255,255,255, 0.5)',
                shadowColor: 'rgba(255, 255, 255, 0.3)',
                shadowBlur: 3,
                shadowOffsetX: 1,
                shadowOffsetY: 2
              }
            },
            axisLabel: {
              fontSize: 12,
              distance: 10,
              color: [[1, 'rgba(255,255,255,0.7)']],
              formatter: function (value) {
                if (value === 0) {
                  return ''
                }
                return value + ''
              }
            },
            axisTick: {
              distance: 0,
              length: 5,
              lineStyle: {
                color: 'rgba(255,255,255, 0.3)'
              }
            },
            pointer: {
              icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
              width: 4,
              length: '65%',
              offsetCenter: [0, '14%'],
              itemStyle: {
                color: '#C0911F',
                shadowColor: 'rgba(0, 0, 0, 0.3)',
                shadowBlur: 8,
                shadowOffsetX: 2,
                shadowOffsetY: 4
              }
            },
            detail: {
              show: false
            },
            title: {
              offsetCenter: [0, '30%']
            },
            data: [
              {
                value: 0
              }
            ]
          },
          {
            name: 'minute',
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 60,
            clockwise: true,
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            pointer: {
              icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
              width: 3,
              length: '80%',
              offsetCenter: [0, '14%'],
              itemStyle: {
                color: '#C0911F',
                shadowColor: 'rgba(0, 0, 0, 0.3)',
                shadowBlur: 8,
                shadowOffsetX: 2,
                shadowOffsetY: 4
              }
            },
            anchor: {
              show: true,
              size: 10,
              showAbove: true,
              itemStyle: {
                color: '#C0911F',
                shadowColor: 'rgba(0, 0, 0, 0.3)',
                shadowBlur: 8,
                shadowOffsetX: 2,
                shadowOffsetY: 4
              }
            },
            detail: {
              show: false
            },
            title: {
              offsetCenter: ['0%', '-40%']
            },
            data: [
              {
                value: 0
              }
            ]
          },
          {
            name: 'second',
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 60,
            animationEasingUpdate: 'bounceOut',
            clockwise: true,
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            pointer: {
              icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
              width: 2,
              length: '95%',
              offsetCenter: [0, '14%'],
              itemStyle: {
                color: '#C0911F',
                shadowColor: 'rgba(0, 0, 0, 0.3)',
                shadowBlur: 8,
                shadowOffsetX: 2,
                shadowOffsetY: 4
              }
            },
            anchor: {
              show: true,
              size: 6,
              showAbove: true,
              itemStyle: {
                color: '#C0911F',
                shadowColor: 'rgba(0, 0, 0, 0.3)',
                shadowBlur: 8,
                shadowOffsetX: 2,
                shadowOffsetY: 4
              }
            },
            detail: {
              show: false
            },
            title: {
              offsetCenter: ['0%', '-40%']
            },
            data: [
              {
                value: 0
              }
            ]
          }
        ]
      }
      return option
    }
  }
}
</script>

<style scoped>
.box-card {
  width: 400px;
  height: 228px;
  border: none;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
  padding-top: 0px;
}
:deep(.el-card__body) {
  padding-top: 0px;
}
.icon-container {
  float: right;
  margin-top: 10px;
  margin-right: -10px;
  cursor: pointer;
}
.icon:hover {
  color: rgba(255, 255, 255, 0.3);
}
.chart {
  height: 190px;
}
.date {
  font-size: 24px;
  font-weight: bold;
  margin-top: -8px;
}
</style>